<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/public.css"/>
	</head>
	<body style="width: 1200px;">
		<div class="live-container">
			<div class="zhibo-box">
			</div>
			<div class="comment-box">
				<h1>讨论</h1>
				<div class="im-box">
						<div class="im-flex-left">
								<span>张老师</span>
								<div class="comment-border-left">
									输入你想要发送的内容输入你想要发送的内容输入你想要发送的内容
									输入你想要发送的内容输入你想要发送的内容输入你想要发送的内容
								</div>
						</div>
						<div class="im-flex-right">
								<div class="comment-border-right">
									${message}
								</div>
								<span>王同学</span>
						</div>
				</div>
				<div class="send-box">
					<textarea rows="" cols="" placeholder="输入你想要发送的内容" id='message'></textarea>
					<button type="button" class="btn">发送</button>
				</div>
			</div>
		</div>
	</body>
</html>
<script src="../../js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/public.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/dream-msg.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	
	let imbox = $('.im-box');
	
	let  single = $('.comment-border-right');
	
	let istrue = true ;
	
	$('.btn').click(function() {
		
		// 禁止重复发送
		if(!istrue) {
			Dreamer.warning('禁止刷!',2000);
			return false
		}else {
			// istrue =false;
			let message = $('#message').val();
			if(!message) {
				Dreamer.warning('请输入内容再发送!',2000);
			}else {
				
				let  left =`<div class="im-flex-left">
								<span>张老师</span>
								<div class="comment-border-left">
									${message}
								</div>
						</div>`
				
				let right =`<div class="im-flex-right">
						<div class="comment-border-right">
							${message}
						</div>
						<span>王同学</span>
				</div>`
				imbox.append(left);
				$('#message').val('')
				// setTimeout(function(){
				// 	istrue = true;
				// },300);
				single.last().addClass('comment-border-right::after');
			}
		}
		
		
	})
	
</script>
<style type="text/css">
	/*滚动条样式*/
	.im-box::-webkit-scrollbar {
		width: 5px;
	}
	.im-box::-webkit-scrollbar-thumb {
		height: 20px;
		border-radius: 30px;
		-webkit-box-shadow: inset 0 0 5px rgba(170, 170, 255, 0.2);
		background: rgba(255, 255, 255, 0.2);
	}
	.im-box::-webkit-scrollbar-track {
		-webkit-box-shadow: inset 0 0 5px rgba(226, 226, 226, 0.2);
		border-radius: 0;
		background: rgba(250, 250, 250, 0.1);
	}
	html,body {
		width: 100%;
		height: 100%;
		display: flex;
		flex-flow: column wrap;
		margin: auto;
		padding-bottom: 20px;
	}
	.live-container {
		flex: 1;
		display: flex;
		flex-flow: row nowrap;
		background-color: #0056D2;
		border-radius: 6px;
	}
	.zhibo-box {
		flex: 1;
	}
	.comment-box {
		width: 30%;
		height: 100vh;
		background-color: #333333;
		text-align: center;
		display: flex;
		flex-flow: column nowrap;
		border-radius: 4px;
		position: relative;
	}
	h1 {
		color: #26AFF7;
		font-size: 24px;
		padding: 18px 0px;
		border-bottom: 4px solid #26AFF7;
		margin:  0 9px;
	}
	.im-box {
		padding: 18px 10px 0 10px;
		height: 60%;
		overflow-y: auto;
		box-sizing: border-box;
		word-wrap: break-word;
		overflow-wrap: anywhere;
	}
	.im-flex-left {
		width: 100%;
		display: flex;
		flex-flow: row nowrap;
		margin-bottom: 24px;
	}
	.im-flex-left span {
		margin-top: 6px;
		white-space: nowrap;
		color: #8E8E8E;
		font-size: 14px;
		font-weight: bold;
	}
	.comment-border-left {
		margin-left: 20px;
		min-width: 2%;
		max-width: 70%;
		padding:10px;
		background-color: #fff;
		border-radius: 4px;
		position: relative;
		text-align: left;
	}
	.comment-border-left::before {
		content: '';
		border: 8px solid transparent;
		border-right: 8px solid #ffffff;
		position: absolute;
		top: 8px;
		left: -16px;
	}
	.im-flex-right {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		margin-bottom: 24px;
	}
	.im-flex-right span {
		margin-top: 6px;
		white-space: nowrap;
		color: #8E8E8E;
		font-size: 14px;
		font-weight: bold;
	}
	.comment-border-right {
		margin-right: 20px;
		min-width: 2%;
		max-width: 70%;
		padding:10px;
		background-color: #55ff00;
		border-radius: 4px;
		position: relative;
		text-align: left;
	}
	.comment-border-right::after {
		content: '';
		border: 8px solid transparent;
		border-left: 8px solid #55ff00;
		position: absolute;
		top: 8px;
		right: -16px;
	}
	.send-box {
		height: 30vh;
		border-top: 1px solid #2D2D2D;
		background-color: #2D2D2D;
		box-sizing: border-box;
	}
	.send-box textarea {
		width: 100%;
		height: 80%;
		resize: none;
		border: none;
		outline: none;
		background-color: rgba(51, 51, 51, 0.3);
		padding:8px;
		box-sizing: border-box;
		color: #8E8E8E;
		font-size: 14px;
	}
	.btn {
		width: 84px;
		height: 36px;
		color: #fff;
		background-color: #26AFF7;
		border-radius: 6px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 70%;
		border: none;
		font-size: 16px;
		outline: none;
		
	}
	.btn:hover {
		background-color: #00FF00;
		color: #fff;
	}
</style>